<template>
    <div class="cesium-compass" ref="compassRef"></div>
</template>

<script setup lang="ts">
import { Compass } from 'cesium-extends'
import { onMounted, ref } from 'vue'

const props = defineProps<{
    map: Cesium.Viewer
}>()

const compassRef = ref<HTMLElement>()
onMounted(() => {
    if (!compassRef.value) {
        return console.warn('compass mount unsuccess')
    }

    const compass = new Compass(props.map, {
        container: compassRef.value,
    })
})
</script>

<style lang="scss" scoped>
.cesium-compass {
    height: 60px;
    width: 60px;
    :deep(.gyro) {
        align-items: center;
        background: #161616;
        border-radius: 50%;
        box-sizing: border-box;
        display: flex;
        height: 30px;
        justify-content: center;
        margin: 0 auto;
        padding: 4px;
        position: relative;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
        transition: all 0.3s ease;
        width: 30px;
    }
}
</style>
